<template>
  <div class="role-list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>筛选搜索</span>
        <div class="action">
          <el-button @click="resetCondition">重置</el-button>
          <el-button
            :loading="isLoading"
            @click="searchRoleByName"
            type="primary"
            >查询</el-button
          >
        </div>
        <div class="search">
          <span>输入搜索：&emsp;</span>
          <el-input placeholder="角色名称" v-model="roleName" clearable>
          </el-input>
        </div>
        <el-button class="mt30" @click="openDialog">添加角色</el-button>
      </div>
      <el-table :data="userData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"> </el-table-column>
        <el-table-column prop="name" label="角色名称" width="180">
        </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column prop="createdTime" label="添加时间"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button @click="assignMenu(scope.row)" type="text"
              >分配菜单</el-button
            >
            <el-button @click="assignResource(scope.row)" type="text"
              >分配资源</el-button
            >
            <el-button @click="editRole(scope.row)" type="text">编辑</el-button>
            <el-button @click="deleteRole(scope.row)" type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 角色新增或边界对话框结构 -->
    <el-dialog
      :title="isEdit ? '编辑角色' : '新增角色'"
      :visible.sync="dialogFormVisible"
    >
      <!-- 新增或编辑功能单独封装 -->
      <save-or-edit
        :is-edit="isEdit"
        :role-id="roleId"
        @success="onSuccess"
        @cancel="onCancel"
      ></save-or-edit>
    </el-dialog>
  </div>
</template>

<script>
import { getAllRole, searchRole, deleteRoleById } from '@/service/role'
import SaveOrEdit from './save-or-edit.vue'
export default {
  components: { SaveOrEdit },
  name: 'role',
  data () {
    return {
      isLoading: false,
      roleName: '',
      userData: [
        {
          id: 1,
          createdBy: 'system',
          updatedBy: 'system',
          createdTime: '2021-05-19T01:44:08.000+0800',
          updatedTime: '2021-05-19T01:44:08.000+0800',
          operatorId: null,
          code: 'ADMIN',
          name: '超级管理员',
          description: '后台管理员，初始拥有权限管理功能'
        }
      ],
      isEdit: false,
      // 角色新增或编辑弹窗是否显示
      dialogFormVisible: false,
      roleId: ''
    }
  },
  created () {
    this.loadAllRole()
  },
  methods: {
    // 新增或编辑角色操作成功
    onSuccess () {
      this.dialogFormVisible = false
      this.loadAllRole()
    },
    // 新增或编辑角色取消操作
    onCancel () {
      this.dialogFormVisible = false
      this.loadAllRole()
    },
    // 打开角色新增或编辑对话框
    openDialog () {
      this.isEdit = false
      this.dialogFormVisible = true
    },
    // 分配菜单
    assignMenu (row) {
      console.log(row)
      this.$router.push({ name: 'alloc-menu', params: { id: row.id } })
    },
    // 分配资源
    assignResource (row) {
      console.log(row)
    },
    // 编辑角色
    editRole (row) {
      this.dialogFormVisible = true
      this.isEdit = true
      this.roleId = row.id
      //   console.log(row)
    },
    // 删除角色
    deleteRole (row) {
      //   console.log(row)
      this.$confirm('即将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data } = await deleteRoleById(row.id)
        if (data.code === '000000') {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.loadAllRole()
        }
      })
      // .catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   })
      // })
    },
    // 重置搜索条件
    resetCondition () {
      this.roleName = ''
      this.searchRoleByName()
    },
    // 按名查询角色
    async searchRoleByName () {
      this.isLoading = true
      const { data } = await searchRole({
        name: this.roleName
      })
      if (data.code === '000000') {
        this.$message.success('查询成功')
        this.isLoading = false
        this.userData = data.data.records ?? []
      }
    },
    async loadAllRole () {
      const { data } = await getAllRole()
      if (data.code === '000000') {
        this.userData = data.data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.mt30 {
  margin-top: 30px;
}
.clearfix:after {
  clear: both;
}

.box-card {
  text-align: left;
  .action {
    float: right;
    .el-button {
      margin-left: 16px;
    }
  }
  .search {
    margin-top: 30px;
    > span {
      width: 100px;
    }
    .el-input {
      width: 300px;
    }
    display: flex;
    align-items: center;
  }
}
</style>
